<template>
	<view class="qrcode-container">
		<uv-toast ref="toast"></uv-toast>
		<PLoader :loading="loading" background-color="#ffffff00"></PLoader>
		<!-- 顶部装饰 -->
		<view class="decoration-header">
			<view class="wave-animation"></view>
		</view>

		<!-- 主要内容区 -->
		<view class="content-wrapper">
			<!-- 券信息卡片 -->
			<view class="coupon-card" v-if="coupon.id">
				<view class="coupon-left">
					<view class="coupon-type">早餐券</view>
					<view class="validity">
						<text>{{ coupon.createTime }}</text>
					</view>
					<view class="code">券码：{{ coupon.voucherCode }}</view>
				</view>

				<view class="coupon-right">
					<view class="status-tag" :class="{ used: coupon.status === 1 }">
						{{ coupon.status === 0 ? '未使用' : '已使用' }}
					</view>
					<view class="time-limit">0:00-10:00可用</view>
				</view>

				<view class="glass-effect"></view>
			</view>

			<!-- 二维码区域 -->
			<view class="qrcode-wrapper">
				<view class="qrcode-border">
					<view class="scan-line"></view>
					<uv-qrcode ref="qrcode" :value="voucherCode" :options="{
						size: 260,
						margin: 10,
						backgroundColor: '#ffffff',
						foregroundColor: '#000000',
						errorCorrectLevel: 'H',
						foregroundImageSrc: '/static/lyf.jpg'
					}"></uv-qrcode>
				</view>
				<view class="refresh-time">
					<text>静态二维码可截图保存</text>
				</view>
			</view>

			<!-- 安全提示 -->
			<view class="security-tips">
				<view class="tip-item">
					<text class="icon iconfont icon-shield"></text>
					<text>请勿将二维码分享给他人</text>
				</view>
				<view class="tip-item">
					<text class="icon iconfont icon-location"></text>
					<text>仅限指定门店使用</text>
				</view>
			</view>

			<!-- 最近商家推荐 -->
			<view class="nearby-stores">
				<view class="section-title">
					<text class="icon iconfont icon-location"></text>
					<text>最近可用商家</text>
				</view>

				<view class="store-list">
					<view class="store-item" v-for="(store, index) in nearbyStores" :key="index">
						<view class="store-info">
							<view class="store-name">{{ store.name }}</view>
							<view class="store-meta">
								<text class="distance">{{ store.distance }}</text>
								<text class="separator">|</text>
								<text class="business-hours">营业时间 {{ store.businessHours }}</text>
							</view>
							<view class="store-address">{{ store.address }}</view>
						</view>
						<view class="navigate-btn" @click.stop="navigateToStore(store)">
							<text class="icon iconfont icon-navigation"></text>
							<text>导航</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				couponId: 0,
				voucherCode: '',
				countdown: 60,
				timer: null,
				coupon: {},
				longitude: 0,
				latitude: 0,
				nearbyStores: []
			}
		},

		onLoad(options) {
			if (options.code && options.id) {
				this.voucherCode = 'https://quickwashmaster.website/lyf/' + `coupon=${options.code}`;
				this.couponId = options.id;
			}
			this.initPage();
		},

		methods: {
			showToast(msg, type = 'default', duration = 1000) {
				this.$refs.toast.show({
					message: msg,
					type: type,
					duration: duration,
				})
			},
			navigateToStore(store) {
				uni.openLocation({
					latitude: Number(store.latitude),
					longitude: Number(store.longitude),
					name: store.name,
					address: store.address,
					fail: (err) => {
						console.log(err);
						this.showToast('导航打开失败');
					}
				});
			},
			async initPage() {
				const {
					latitude,
					longitude
				} = await uni.getLocation({
					geocode: true,
				});

				this.latitude = latitude;
				this.longitude = longitude;

				await this.fetchCouponInfo();
				await this.fetchNearMerchant();
			},
			async fetchNearMerchant() {
				try {
					this.loading = true;
					const dto = {
						current: 1,
						size: 2,
						latitude: this.latitude,
						longitude: this.longitude
					};
					const data = await this.$http.post('/merchant/near/list', dto);
					const items = data.items;
					if (items && Array.isArray(items)) {
						this.nearbyStores = items.map(store => ({
							name: store.name,
							distance: this.formatDistance(store.distance),
							businessHours: store.openingHours || '06:00-10:00',
							address: store.address,
							latitude: store.latitude,
							longitude: store.longitude
						}));
					}
				} catch (e) {
					this.showToast('获取商家失败');
				} finally {
					this.loading = false;
				}
			},
			async fetchCouponInfo() {
				try {
					this.loading = true;
					const data = await this.$http.post(`/breakfast/coupon/byId?id=${this.couponId}`);
					this.coupon = data;
				} catch (e) {
					this.showToast(e.msg);
				} finally {
					this.loading = false;
				}
			},
			formatDistance(meters) {
				if (!meters) return '未知距离';
				return meters < 1 ? `${meters}m` : `${meters.toFixed(1)}km`;
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import 'breakfast_coupon_qrc_code.scss';
</style>